<template>
    <div class="freemusic">
      <!-- 搜索到的歌曲 -->
        <div class="img" v-for="item in data.musicList" target="_blank" :key="item.id" @click="obtain(item.id,item.al.picUrl,item.name,item.ar[0].name)">
          <a target="_blank">
            <img :src=item.al.picUrl alt="图片文本描述" width="300" height="200">
          </a>
          <div class="desc">{{item.name}}</div>
        </div>

    </div>
</template>

<script>
import { data } from "@/play/data";
import {mets} from "@/play/play";
import musicUpdata from "@/play/musicUpdata";
console.log(data)
export default {
    name: 'FreeMusic',
    data() {
        return {
            data
        }
    },
    components: {
    //    MusicItem
    }, methods: {
        test1: function () {
            console.log(this._data)
            console.log(data.musicList[0].al.picUrl)
            
        },
        obtain:function(musicId,picUrl,musicName,author){
            
            mets.playMusic(musicId)         //mets对象获取了音乐的信息

            data.musicUrl=mets.musicUrl     //将音乐信息存到全局变量data里
            data.picUrl=picUrl
            data.musicId=musicId
            data.musicName=musicName
            data.num++
            data.author=author

            musicUpdata.methods.addMusic()  //将音乐存到播放列表里
            data.isPlay=true
            
        }

    }
}
</script>

<style>
.freemusic {
    overflow: auto;
    width: 100%;
    height: 100%;
}
div.img {
  
  /*float: left;*/
  width: 820px;
  height:55px;
  background-color: aliceblue;
  border-bottom:11px solid rgb(225, 225, 228);
}

div.img:hover {
  border: 1px solid #777;
}

div.img img {
  width: 7%;
  height: auto;
}

div.desc {
    margin-top: -50px;
    margin-right:100px;
    padding: 5px;
    text-align: right;
}


</style>